<template>
	<div class="index">
		<div class="top-advertise">
			<a href=""><img src="../../static/img/advertise4.jpg" /></a>
		</div>
		<!--移动端导航-->
		<div class="moby-nav">
			<ul class="moby-nav-list">
				<li v-for="item in 5">
					<a href="">菜单</a>
				</li>
			</ul>
		</div>
		<Top :msg="this.$route.path"></Top>
		<!--头部导航-->
		<!--快速登录-->
		<div class="fast-login">
			<div class="wrap fast-login-box">
				<div class="fast-login-intro">
					<img src="../../static/img/advertise3.jpg" alt="" />
				</div>
				<div class="fast-login-section">
					<el-input placeholder="请输入手机号" v-model="fastNumber" class="fast-login-phone"></el-input>&nbsp;&nbsp;
					<el-input placeholder="验证码" v-model="validateNumber" class="fast-login-validate"></el-input>&nbsp;&nbsp;
					<!--<el-button slot="append" icon="el-icon-search"></el-button>-->
					<a href="javascript:;" class="fast-login-register">登陆/注册</a>
				</div>
			</div>
		</div>
		<div class="search-section">
			<div class="searchbox">
				<div class="searchbox-input">
					<el-input placeholder="搜索职位、公司或地点" v-model="searchKeyWords" clearable></el-input>
					<span class="searchbox-btn">搜索</span>
				</div>
				<div class="hot-search">
					<span>热门搜索:</span>
					<a href="javascript:;">web前端</a>
					<a href="javascript:;">Java后端</a>
					<a href="javascript:;">测试开发</a>
				</div>
			</div>
		</div>

		<!--职位分类-->
		<div class="job-sort">
			<div class="wrap clearfixed">
				<ul class="job-sort-list">
					<li v-for="item in 6" :key="item">
						<span class="big-sort">技术</span>
						<a href="javascript:;">java</a>
						<a href="javascript:;">java</a>
						<a href="javascript:;">java</a>
						<a href="javascript:;">java</a>
						<ul class="details-sort-list">
							<li v-for="item in 3" :key="item">
								<span>后端开发</span>
								<div class="details-sort-intro">
									<a href="" v-for="(item,index) in 15" :key="item" :class="{hot:item%3==0}">java</a>
								</div>
							</li>
						</ul>
						<i class="el-icon-arrow-right cus-arrow-right"></i>
					</li>
				</ul>
				<div class="advertise-banner">
					<el-carousel :interval="3000" type="card">
						<el-carousel-item v-for="item in adbanner" :key="item">
							<img :src="item" alt="" />
						</el-carousel-item>
					</el-carousel>
				</div>
			</div>
		</div>

		<!--热招职位-->
		<div class="hot-job">
			<div class="wrap clearfixed">
				<div class="hot-job-titlebox">
					<span class="hot-job-title">热招职位</span>
				</div>
				<div class="job-nav">
					<a href="javascript:;" :class="infiniter == item ? 'active' : ''" v-for="item in hotjob" :key="item" @click="handHotJobTitle(item)">{{item}}</a>
				</div>
				<ul class="hot-job-show">
					<li v-for="item in 9" :key="item">
						<div class="layer">
							<img src="../../static/img/meituan.jpg" alt="" />
							<div class="job-show-item">
								<router-link :to="{path:'/details'}">
									<p>高级软件工程师</p>
									</router-link>
										<span>成都</span>
										<span>3-5年</span>
										<span>本科</span>
										<div class="job-salary">15-25k 13薪</div>
							</div>
						</div>
					</li>
				</ul>
				<div class="hot-morebtnbox">
					<el-button type="primary" class="hot-job-morebtn">查看更多</el-button>
				</div>
			</div>
		</div>

		<!--热门企业-->
		<div class="hot-job hot-company">
			<div class="wrap clearfixed">
				<div class="hot-job-titlebox">
					<span class="hot-job-title">热招企业</span>
				</div>
				<ul class="hot-company-show clearfixed">
					<li v-for="item in 8" :key="item">
						<div class="item">
							<img src="../../static/img/meituan.jpg" alt="" />
							<div class="hot-company-item">
								<p>迪原创新</p>
								<span>未融资</span>
								<span>计算机软件</span>
								<div class="hot-position">
									<span>200</span>个热招职位
								</div>
							</div>
						</div>
					</li>
				</ul>
				<div class="hot-morebtnbox">
					<el-button type="primary" class="hot-job-morebtn">查看更多</el-button>
				</div>
			</div>
		</div>

		<div class="wrap-log-box">
			<el-dialog title="" :visible.sync="dialogFormVisible" width="500px" :close-on-click-modal="false" @closed="dialogFormClose">
				<h1>万息招聘</h1>
				<div class="wx-box">
					<router-view></router-view>
				</div>
			</el-dialog>
		</div>
		<Bottom></Bottom>
		<!--<span class="iconfont icon-fajianli">123</span>-->
	</div>
</template>

<script>
import Bottom from "./bottom";
import Top from "./top";

export default {
  components: {
    Bottom,
    Top
  },
  data() {
    return {
      dialogFormVisible: false,
      navlist: [
        "切换城市",
        "首页",
        "职位",
        "公司",
        "资讯",
        "上传简历",
        "注册",
        "登录"
      ],
      navlist: [
        {
          name: "首页",
          path: "/index"
        },
        {
          name: "职位",
          path: "/position"
        },
        {
          name: "公司",
          path: "/company"
        },
        {
          name: "资讯",
          path: "/info"
        },
        {
          name: "上传简历",
          path: "/person"
        }
      ],
      isCurr: false,
      activeIndex: "/index",
      searchKeyWords: "",
      fastNumber: "", //快速登录手机号
      validateNumber: "", //快速登录验证码
      adbanner: [
        "../../static/img/scenery1-2.jpg",
        "../../static/img/scenery1-5.jpg",
        "../../static/img/scenery1-6.jpg"
      ], //banner图片
      detailSort: [
        {
          outitle: "后端开发",
          child: [
            {
              mintitle: "java"
            },
            {
              mintitle: "java"
            },
            {
              mintitle: "java"
            },
            {
              mintitle: "java"
            }
          ]
        }
      ],
      hotjob: [
        "IT-互联网",
        "金融",
        "地产建筑",
        "教育培训",
        "娱乐传媒",
        "医疗健康",
        "法律咨询"
      ],
      infiniter: "IT-互联网" //热门工作选中样式
    };
  },
  mounted() {
    console.log(this.$route.path);
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handHotJobTitle(item) {
      this.infiniter = item;
    },
    //登陸
    //			login() {
    //				this.dialogFormVisible = true;
    //				this.$router.push("login");
    //
    //			},
    //			//注冊
    //			register() {
    //				this.dialogFormVisible = true;
    //				this.$router.push("register");
    //			},
    //弹出框关闭时
    dialogFormClose() {
      this.$router.push("index");
    }
  }
};
</script>

<style scoped>
@import "../assets/css/index.css";
</style>